<!--
 * @Author: lihaonan
 * @Date: 2024-06-18 10:10:01
 * @LastEditors: lihaonan
 * @LastEditTime: 2024-09-29 09:37:48
 * @Description: 编辑信息
-->
<template>
    <view class="index">
        <view class="content">
            <u-form :model="model" ref="form1">
                <u-form-item label="活动图片" prop="contractInfo.cover" borderBottom labelPosition="top" labelWidth="140">
                    <u-upload :fileList="fileList" name="1" :maxCount="1" width="76" height="76"
                        @afterRead="afterReadPoint">
                        <image :src="IMG_URL + model.cover" style="width: 200rpx; height: 200rpx;"></image>
                    </u-upload>
                </u-form-item>
                <u-form-item label="活动名称" prop="userInfo.actName" borderBottom ref="item1" labelWidth="140">
                    <u-input v-model="model.actName" border="none"></u-input>
                </u-form-item>
                <u-form-item label="活动分类" prop="userInfo.category" borderBottom ref="item1" labelWidth="140"
                    @click="actShow = true">
                    <u-input v-model="model.category" disabled disabledColor="#ffffff" placeholder="请选择活动分类"
                        border="none"></u-input>
                </u-form-item>
                <u-form-item label="活动地址" prop="userInfo.actLocation" borderBottom ref="item1" labelWidth="140">
                    <picker mode="region" :value="date" class="u-w-440" @change="bindTimeChange">
                        <view class="text">
                            <u-input v-model="model.actLocation" inputAlign="left" border="none"></u-input>
                        </view>
                    </picker>
                </u-form-item>
                <u-form-item label="组织人" prop="userInfo.organizer" borderBottom ref="item1" labelWidth="140">
                    <u-input placeholder="请输入组织人" v-model="model.organizer" border="none" type="number"></u-input>
                </u-form-item>
                <u-form-item label="报名价格" prop="userInfo.price" borderBottom ref="item1" labelWidth="140">
                    <u-input placeholder="每人/￥" v-model="model.price" border="none" type="number"></u-input>
                </u-form-item>
                <u-form-item label="报名人数" prop="userInfo.numberLimit" borderBottom ref="item1" labelWidth="140">
                    <u-input placeholder="请输入最多报名人数" v-model="model.numberLimit" border="none" type="number"></u-input>
                </u-form-item>
                <u-form-item label="开始时间" prop="userInfo.actTime" borderBottom ref="item1" labelWidth="140"
                    @click="show = true">
                    <u-input placeholder="请选择开始时间" v-model="model.actTime" border="none" type="number"></u-input>
                    <u-datetime-picker hasInput :show="show" v-model="actTime" mode="datetime" @close="show = false"
                        @cancel="show = false" @confirm="showChange"></u-datetime-picker>
                </u-form-item>
                <u-form-item label="结束时间" prop="userInfo.endTime" borderBottom ref="item1" labelWidth="140"
                    @click="show1 = true">
                    <u-input placeholder="请选择结束时间" v-model="model.endTime" border="none" type="number"></u-input>
                    <u-datetime-picker hasInput :show="show1" v-model="endTime" mode="datetime" @close="show1 = false"
                        @cancel="show1 = false" @confirm="show1Change"></u-datetime-picker>
                </u-form-item>
                <u-form-item label="活动内容" prop="userInfo.content" borderBottom ref="item1" labelWidth="140">
                    <u-textarea v-model="model.content" placeholder="请输入活动内容" maxlength="200" count></u-textarea>
                </u-form-item>
                <u-form-item label="注意事项" prop="userInfo.note" borderBottom ref="item1" labelWidth="140">
                    <u-textarea v-model="model.note" placeholder="请输入注意事项" maxlength="200" count></u-textarea>
                </u-form-item>
                <u-form-item label="活动描述" prop="userInfo.des" borderBottom ref="item1" labelWidth="140">
                    <u-textarea v-model="model.des" placeholder="请输入活动描述" maxlength="200" count></u-textarea>
                </u-form-item>
            </u-form>
            <view class="button pt-45">
                <view class="to-btn" @click="submit">提交</view>
            </view>
        </view>
        <u-action-sheet :show="actShow" :actions="actArr" title="请选择性别" @close="actShow = false"
            @select="actChange"></u-action-sheet>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive } from "vue";
import { addActList } from "@/api/swiper";
import { useUserStore } from "@/store/user";
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
const IMG_URL = import.meta.env.VITE_BASE_URL_IMG;
const show = ref(false);
const show1 = ref(false);
const actShow = ref(false);
const actTime = ref(Date.now());
const endTime = ref(Date.now());
const userUserStore = useUserStore();
const actArr = reactive([
    {
        id: "0",
        name: "近期活动",
    },
    {
        id: "1",
        name: "工作坊",
    },
    {
        id: "2",
        name: "同游",
    },
]);
const model = ref({
    cover: "",
    actName: "",
    category: "",
    actLocation: "",
    organizer: "",
    content: "",
    note: "",
    des: "",
    price: "",
    numberLimit: "",
    actTime: '',
    endTime: '',
});
const date = ref()
// 地区
const bindTimeChange = (e) => {
    model.value.actLocation = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
}

const hobbyList = ref<{ id: number; val: string }[]>([]);
// 图片列表
const fileList = ref([]);
// 选择活动类别
const actChange = (val: { name: string }) => {
    model.value.category = val.name;
};
// 开始时间
const showChange = (val: any) => {
    const date = new Date(val.value);
    actTime.value = val.value
    model.value.actTime = dayjs(date).format("YYYY-MM-DD HH:mm") + ':00';
    console.log(actTime.value, model.value.actTime);
    show.value = false;
}
// 结束时间
const show1Change = (val: any) => {
    const date = new Date(val.value);
    endTime.value = val.value
    model.value.endTime = dayjs(date).format("YYYY-MM-DD HH:mm") + ':00';
    show1.value = false;
}
onLoad((option) => {
    if (!option) return;

});
// 收集点照片上传
const afterReadPoint = async (res: any) => {
    let a = uni.uploadFile({
        url: import.meta.env.VITE_BASE_URL + "/common/upload",
        filePath: res.file.url,
        name: "file",
        header: {
            Authorization: uni.getStorageSync("token"),
        },
        formData: {
            file: "file",
        },
        success: (res) => {
            setTimeout(() => {
                let dataing = JSON.parse(res.data);
                model.value.cover = dataing.fileName;
            }, 1000);
        },
    });
};

// 提交申请
const submit = async () => {
    uni.showLoading({ title: "提交中" });
    const { code } = await addActList({ ...model.value, });
    if (code !== 200) return;
    uni.hideLoading();
    uni.navigateBack();
};
</script>
<style>
.u-action-sheet__item-wrap {
    overflow: auto;
    max-height: 50vh;
}
</style>
<style lang="scss" scoped>
.index {
    height: 100vh;
    overflow-x: hidden;
    background-color: rgb(245, 245, 245);

    .content {
        margin-top: 90rpx;
        // width: 90%;
        padding: 0 30rpx;
        // height: 1580rpx;
        margin: 0 auto;
        background: #fff;
        box-shadow: 5px 5px 5px #cdcfcf;
    }

    .button {
        .to-btn {
            width: 536rpx;
            height: 84rpx;
            background: linear-gradient(86deg, #eb97b0, #f5c9d2);
            border-radius: 42rpx 42rpx 42rpx 42rpx;
            text-align: center;
            line-height: 84rpx;
            margin: auto;
            margin-top: 43rpx;
            color: #fff;
            font-weight: 400;
            font-family: "PingFang SC-Bold, PingFang SC";
            font-size: 28rpx;
        }
    }
}
</style>
  